<template>
    <div id="container">
        <div v-if="flag">
         <div
          class="notice_wrapper"
          v-for="item in noticeList"
          :key="item.noticeId"
        >
          <div class="notice_content">
            <span style="color: blue; margin-right: 10px">-</span
            ><router-link :to="{path:'/common/notice/notice/',query:{id:item.noticeId}}">{{
              item.noticeTitle
            }}</router-link>
          </div>
          <label style="float: right">{{ item.noticeTime }}</label>
          <el-divider></el-divider>
        </div>
      </div>
      <div v-else class="notice_one">
          <h2>{{notice.noticeTitle}}</h2>
         <div v-html="notice.noticeContent"></div>
      </div>
    </div>
</template>
<script>
export default {
data(){
return{
    noticeList: [],
    flag:true,
    notice:{}
}
},
created(){
    console.log(this.$route)
    this.getNoticeList();
    if(this.$route.query.id != null && this.$route.query.id != undefined){
        this.flag = false
        this.getNoticeById(this.$route.query.id)
    }
},
 watch:{
      $route(to, from) {
          if(this.$route.query.id != null && this.$route.query.id != undefined){
        this.flag = false
        this.getNoticeById(this.$route.query.id)
    }
    else{
        this.flag  = true
    }
      }
  },
methods:{
      async getNoticeList() {
      const { data: res } = await this.$http.get(
        "/common/notice/notice/getNoticeList"
      );
      if (res.code != 200) {
        console.log("获取公告列表失败");
      } else {
        this.noticeList = res.data;
      }
    },
        async getNoticeById(id) {
      const { data: res } = await this.$http.get(
        "/common/notice/notice/getNoticeById",{params:{noticeId:id}}
      );
      if (res.code != 200) {
        console.log("获取公告失败");
      } else {
        this.notice = res.data;
      }
    },
}
}
</script>
<style lang="less" scoped>
  .notice_wrapper {
    margin-left: 60px;
    margin-top: 20px;
    margin-right: 10px;
    font-size: 13px;
  }
  .notice_content {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 265px;
    display: inline-block;
    a{
        text-decoration: none;
        color:#000;
        
    }
    a:hover{
            color:blue
        }
  }
  .el-divider--horizontal {
  display: block;
  height: 1px;
  width: auto;
  margin: 0;
}
.notice_one{
    text-align: center;
    div{
        width: 80%;
    margin: 0 auto;
    }
    h2{
        margin:20px auto;
    }
    /deep/p{
            text-align: left;
    text-indent: 2em;
    line-height: 2;
    img{
        margin: 0 auto;
    display: block;
    }
    }
}
</style>